<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
        body {
            overflow: hidden;
            background-color: black;
        }
        
        * {
            padding: 0;
            margin: 0;
        }
        
        .box {
            position: absolute;
            height: 600px;
            width: 1200px;
            left: 50%;
            margin-left: -600px;
            top: 50%;
            margin-top: -300px;
            /* transition: all 2s ease; */
        }
        
        .box>div {
            position: absolute;
            left: 0;
            top: 0;
            transform-style: preserve-3d;
        }
    </style>



</head>

<body>


    <div class="box">
    </div>

</body>
<script>
    var box = document.getElementsByClassName('box');
    // var array = ['images/3aa3b1a332986b5744d7bbb4a82cab443cd71a1c.jpg', 'images/3ba26ef4db83774591f67cbcb21ae9c2.jpeg', 'images/5af403d61164a.jpg', 'images/5ea6519528f62.jpg'];
    // var index = 0;

    function boom(a) {
        for (var i = 0; i < a; i++) {
            for (var j = 0; j < a; j++) {
                var div = document.createElement('div');
                div.style.background = 'url(images/3aa3b1a332986b5744d7bbb4a82cab443cd71a1c.jpg)';
                div.style.width = (box[0].clientWidth / a) + 'px';
                div.style.height = (box[0].clientHeight / a) + 'px';
                div.style.left = (box[0].clientWidth / a) * i + 'px';
                div.style.top = (box[0].clientHeight / a) * j + 'px';
                div.style.backgroundPositionX = (box[0].clientWidth / a) * -i + 'px';
                div.style.backgroundPositionY = (box[0].clientHeight / a) * -j + 'px';
                div.style.transition = (Math.random() * 2) + 's';
                box[0].appendChild(div);
            }
        }
    }
    //定时操作
    /*     setInterval(function() {
            index = (index == array.length) ? 0 : index;
            boom(10);
            index++;
            setTimeout(function() {
                var divs = box[0].children;
                for (var i = 0; i < divs.length; i++) {
                    divs[i].style.transform = 'perspective(100px) rotateX(' + (Math.random() > 0.5 ? Math.random() * 100 : Math.random() * -100) + 'deg) rotateY(' + (Math.random() > 0.5 ? Math.random() * 100 : Math.random() * -100) + 'deg)  translateX(' + (Math.random() > 0.5 ? Math.random() * 100 : Math.random() * -100) + 'px) translateY(' + (Math.random() > 0.5 ? Math.random() * 500 : Math.random() * -500) + 'px) translateX(' + (Math.random() > 0.5 ? Math.random() * 500 : Math.random() * -500) + 'px)';
                    divs[i].style.opacity = 0;
                }
            }, 1000)

        }, 2000);
     */
    boom(10);
    window.addEventListener('mousedown', function() {
        var divs = box[0].children;
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.transform = 'perspective(10px) rotateX(' + (Math.random() > 0.5 ?
                Math.random() * 100 : Math.random() * -100) + 'deg) rotateY(' + (Math.random() > 0.5 ? Math.random() * 100 : Math.random() * -100) + 'deg)  translateX(' + (Math.random() > 0.5 ? Math.random() * 100 : Math.random() * -100) + 'px) translateY(' + (Math.random() > 0.5 ?
                Math.random() * 500 : Math.random() * -500) + 'px) translateX(' + (Math.random() > 0.5 ? Math.random() * 500 : Math.random() * -500) + 'px)';
            divs[i].style.opacity = 0;
        }

    })
    window.addEventListener('mouseup', function() {
        setTimeout(function() {

            boom(10);

        }, 1500);
    });
</script>

</html>